<!-- 广告
修改人：张家豪
时间：2020/6/23 -->
<template>
    <div class="about">
        <div>
            <el-form ref="searchForm" :model="searchForm" :inline="true" label-width="80px">
                <el-col :xl="6" :md="8" :sm="24">
                    <el-form-item label="广告名称" prop="ads">
                        <el-input placeholder="请输入广告名称" v-model="searchForm.ads" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :xl="6||24" :md="8||24" :sm="24">
                    <el-form-item>
                        <div :style=" { float: 'right', overflow: 'hidden' } || {} ">
                            <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
                            <el-button class="ml-5" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-form>
        </div>

          <!-- 新增 -->
        <div>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="edit()">添加广告</el-button>
        </div>

         <page-table @load-table-data="loadTableData" ref="dataTable" @selection-change="selection" row-key="id">
            <template slot="tb-columns">
                <el-table-column align="center" prop="adsUrl" label="广告图片" style="width:150">
                    <template slot-scope="scope">
                        <img :src="scope.row.adsUrl" style="width:100px;height:50px" />
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="ads" label="广告名称"></el-table-column>
                <el-table-column align="center" prop="http" label="广告地址" ></el-table-column>
                 <el-table-column fixed="right" align="center" width="400" label="操作">
                     <template slot-scope="scope">
                         <el-button type="primary"  @click="edit_alter(scope.row)">广告修改</el-button>
                          <el-divider direction="vertical"></el-divider>
                           <el-button  type="danger" @click="remove(scope.row.id)">广告删除</el-button>
                     </template>
                 </el-table-column>

            </template>
        </page-table>
        <!-- 弹出添加的窗口 -->
        <Edit :visible='visible' :title='title' :defaultFormData='defaultFormData' v-if='visible' @close='close' />

    </div>
</template>



<script>
    import PageTable from '@/components/common/PageTable'
    import {page,remove} from '@/api/modules/ads'
    import Edit from '@/views/edit/edit_ads'
   
    // import About from './about'
    export default {
        name: "ads",
        components: {PageTable,Edit},
        data() {

            return {
                searchForm: {
                    ads: ''
                },
                multipleSelection: [],
                visible: false,
                username: '',
                defaultFormData: {}
            };
        },

        methods: {
            close(val) {
                this.visible = false
                if (val) {
                    this.$refs.dataTable.loadTableData('reload')
                }
            },
            edit() {
                //console.log(row)
                this.visible = true
                this.title = '新增广告'
                this.defaultFormData = {}
            },
            edit_alter(row) {
                //console.log(row)
                this.visible = true
                this.title = '修改广告'
                this.defaultFormData = row
                console.log(row)
            },
            remove(id) {
                //弹窗询问是否删除
                console.log("111111")
                this.$confirm('此操作将永久删除该广告, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    remove(id).then(res => {
                        this.toast(res.message)
                        //重新刷新表单数据
                        this.$refs.dataTable.loadTableData('reload')
                    })
                })
            },

            loadTableData(filter, callback) {
                filter = {
                    ...filter,
                    ...this.searchForm
                }
                page(filter).then(res => {
                    this.total = res.data.total
                    // console.log(this.total)
                    let tableData = {
                        ...res.data,
                        data: res.data.records

                    }
                    callback(tableData)

                })
            },
            selection(val) {
                this.multipleSelection = val;
            },
            search() {
                this.$refs.dataTable.loadTableData('reload')
            },
            reset() {
                this.$refs.searchForm.resetFields()
                this.$refs.dataTable.loadTableData('reload')
            },


        }
    };
</script>
